<template>
  <div class="container">
    <!--    默认插槽-->
    <Category title="美食">
      <!--      插槽值-->
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>
    <!--    具名插槽-->
    <Category2 title="美食">
      <!--      对应不同插槽名,将内容插入对应的插槽:一个插槽名可以使用在多个标签上-->
      <img slot="footer" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="center" href="http://www.atguigu.com">更多美食</a>
      <a slot="footer" href="http://www.atguigu.com">更多美食</a>
      <br slot="center">
      <a slot="center"> href="http://www.atguigu.com">真的吗</a>
    </Category2>
    <!--    作用域插槽-->
    <category3 title="美食">
      <!--      需要使用template标签-->
      <template scope="data">
        <ul>
          <li v-for="(game,index) in data.zengyujie" :key="index">{{ game }}</li>
        </ul>
      </template>
    </category3>

    <!--    解构赋值-->
    <category3 title="美食">
      <!--      需要使用template标签-->
      <template scope="{zengyujie}">
        <ol>
          <li v-for="(game,index) in zengyujie" :key="index">{{ game }}</li>
        </ol>
      </template>
    </category3>
  </div>
</template>

<script>
import Category from './components/Category'
import Category2 from './components/Category2'
import Category3 from './components/Category3'

export default {
  name: 'App',
  components: {Category, Category2, Category3},
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}
</style>
